<template>
  <t-button theme="primary" v-permission="['system:engineering:contract-extension-apply']" @click="handleOpenDialog('update', { orderId: props.orderId, engineeringId: props.engineeringId, contractId: props.contractId,extensionFileUrl:[] })">
      申请合同延期
  </t-button>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData,readonly }"
    :api-map="{ update: engineeringContractExtensionApply }"
    header="编辑节点"
    :on-before-save-data="handleDialogSaveData"
    @request-success="handleDialogRequestSuccess"
  >
      <t-form-item
        label="延期时间"
        name="extensionTime"
        :rules="[{ required: true, message: '请选择延期时间' }]"
      >
        <t-date-picker 
          allow-input
          v-model:value="formData.extensionTime"
          clearable
          placeholder="请选择延期时间"
          value-type="time-stamp"
          style="width: 100%"
          @change="
            (value) => {
              if (value) {
                value = dayjs(value).format('YYYY-MM-DD 23:59:59');
                
              }
              formData.extensionTime = value ? value : undefined;
            }
          "
        />
      </t-form-item>
      <t-form-item label="延期图片" name="extensionFileUrl" :rules="[{ required: true, message: '请上传延期图片' }]">
        <upload 
          v-model:files="formData.extensionFileUrl" 
          accept="image/*" 
          theme="image" 
          multiple
          :disabled="readonly"
          />
      </t-form-item>
  </custom-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { MessagePlugin } from 'tdesign-vue-next';
import { PropType, ref, useTemplateRef } from 'vue';

import { engineeringContractExtensionApply } from '@/api/project/details';
import { getAllSimpleUserlist } from '@/api/system/user';
import CustomDialog from '@/components/custom/dialog/index.vue';
import Upload from '@/components/upload/index.vue';

// props
const props = defineProps({
  // 订单ids
  orderId: {
    type: Number,
    required: true,
  },
  engineeringId: {
    type: Number,
    required: true,
  },
  contractId: {
    type: Number,
    required: true,
  },

});
// emits
const emits = defineEmits(['requestSuccess']);
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  emits('requestSuccess', result);
};
// 处理对话框保存数据
const handleDialogSaveData =(params: Record<string, any>)=>{
  
  params.extensionFileUrl = params.extensionFileUrl.map((node:any) => {return {
    response:node.response,
  }} )

}
</script>
